<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

    <title>Vertical Playground</title>

    <script src="../blockly_uncompressed_vertical.js"></script>
    <script src="../msg/messages.js"></script>
    <script src="../blocks_vertical/vertical_extensions.js"></script>
    <script src="../blocks_common/math.js"></script>
    <script src="../blocks_common/text.js"></script>
    <script src="../blocks_common/colour.js"></script>
    <script src="../blocks_vertical/control.js"></script>
    <script src="../blocks_vertical/event.js"></script>
    <script src="../blocks_vertical/motion.js"></script>
    <script src="../blocks_vertical/looks.js"></script>
    <script src="../blocks_vertical/procedures.js"></script>
    <script src="../blocks_vertical/operators.js"></script>
    <script src="../blocks_vertical/pen.js"></script>
    <script src="../blocks_vertical/sound.js"></script>
    <script src="../blocks_vertical/sensing.js"></script>
    <script src="../blocks_vertical/data.js"></script>
    <script src="../blocks_vertical/inout.js"></script>
    <script src="../blocks_vertical/default_toolbox.js"></script>
    <script src="../blocks_vertical/customs.js"></script>
    <script src="../blocks_vertical/servo.js"></script>



    <script src="../generators/arduino.js"></script>
    <script src="../generators/arduino/logic.js"></script>
    <script src="../generators/arduino/math.js"></script>
    <script src="../generators/arduino/control.js"></script>
    <script src="../generators/arduino/text.js"></script>
    <script src="../generators/arduino/data.js"></script>
    <script src="../generators/arduino/inout.js"></script>
    <script src="../generators/arduino/customs.js"></script>
    <script src="../generators/arduino/servo.js"></script>


    <script>
      'use strict';

      var workspace = null;

      function start() {

        // Setup blocks
        // Parse the URL arguments.
        var match = location.search.match(/dir=([^&]+)/);
        var rtl = match && match[1] == 'rtl';
        //document.forms.options.elements.dir.selectedIndex = Number(rtl);
        var toolbox = getToolboxElement();
//        document.forms.options.elements.toolbox.selectedIndex =
//          toolbox ? 1: 0;

        match = location.search.match(/side=([^&]+)/);

        var side = match ? match[1] : 'start';

//        document.forms.options.elements.side.value = side;

        // Create main workspace.
        workspace = Blockly.inject('content_blocks', {
          comments: false,
          disable: false,
          collapse: false,
          media: '../media/',
          readOnly: false,
          rtl: rtl,
          scrollbars: true,
          toolbox: toolbox,
          toolboxPosition: side == 'top' || side == 'start' ? 'start' : 'end',
          horizontalLayout: side == 'top' || side == 'bottom',
//          sounds: soundsEnabled,
          grid:
             {spacing: 20,
              length: 3,
              colour: '#ccc',
              snap: true},
          zoom: {
            controls: true,
            wheel: true,
            startScale: 0.75,
            maxScale: 4,
            minScale: 0.25,
            scaleSpeed: 1.1
          },
          colours: {
            fieldShadow: 'rgba(255, 255, 255, 10)',
            dragShadowOpacity: 0.6
          },
          trashcan: true
        });

      }

      function getToolboxElement() {
        var match = location.search.match(/toolbox=([^&]+)/);
        return document.getElementById('toolbox-' + (match ? match[1] : 'simple'));
      }

    </script>

    <style>
      html, body {
        height: 100%;
      }

      body {
        background-color: #fff;
        font-family: sans-serif;
        overflow: hidden;
      }


      #content_blocks {
        float: right;
        height: 100%;
        width: 100%;
        position: relative;
        left: 0px;
         top: 0px;
      }


      #collaborators > img {
        margin-right: 5px;
        height: 30px;
        padding-bottom: 5px;
        width: 30px;
        border-radius: 3px;
      }

      /* Tabs */
      #tabRow>td {
        border: 1px solid #ccc;
      }

      table {
        border-collapse: collapse;
        margin: 0;
        padding: 0;
        border: none;
      }
      td {
        padding: 0;
        vertical-align: top;
      }
      #content_blocks #content_xml #content_arduino {
        visibility: hidden;
        margin: 10ex;
        padding: 10ex;
        position: absolute;
        direction: ltr;
      }
      #content_xml {
        resize: none;
        outline: none;
        border: none;
        font-family: monospace;
        overflow: scroll;
      }
      button {
        padding: 1px 1em;
        font-size: 90%;
        border-radius: 4px;
        border: 1px solid #ddd;
        background-color: #eee;
        color: black;
      }
      button:active {
        border: 1px solid blue !important;
      }
      button:hover {
        box-shadow: 2px 2px 5px #888;
      }
      .all{
        width:100%;
        height:800px;
        margin:0 auto;
      }
      .all h2{
        height:30px;
        margin: 0px;
        width: 400px;
        float: left;
      }
      .all .Conbutleft span{
        width:100px;
        height:30px;
        background:#fff;
        line-height:30px;
        text-align: center;
        float:left;
        margin-right:10px;
        cursor:pointer;
      }
      .all a{
        height:100%;
        display:none;
      }
       textarea{
        width: 100%;
        height: 100%;
       }
       .Conbutright{
        width: auto;
        float: right;
        margin: 0;
       }
    </style>
  </head>

  <body onload="start()">
     <div class="all" id="box">
        <h2 id="tabRow" class="Conbutleft">
            <span style="background:#ccc" id="tab_blocks">Blocks</span>
            <span id="tab_arduino">Arduino</span>
            <span style="margin:0;" id="tab_xml">XML</span>
        </h2>
        <h3 class="Conbutright">
            <button type="button" onclick="uploadClick()">Upload</button>
            <button type="button" onclick="resetClick()">Reset</button>
            <button onclick="discard()">Discard</button>
            <button onclick="saveCode()">Save Arduino Code</button>
            <button onclick="save()">Save XML</button>
            <button id="fakeload">Load XML</button>
            <input type="file" id="load" style="display: none;"/>
        </h3>
        <a style="display:block;" id="content_blocks"></a>
        <a>
          <textarea id="content_arduino" class="content" readonly wrap="off"></textarea>
        </a>
        <a>
          <textarea id="content_xml" class="content" wrap="off"></textarea>
        </a>
    </div>

    <xml id="toolbox-simple" style="display: none">
  <category name="Logic" colour="#4C97FF" secondaryColour="#4280D7">
    <block type="control_repeat" id="control_repeat">
      <value name="TIMES">
        <shadow type="math_whole_number">
          <field name="NUM">10</field>
        </shadow>
      </value>
    </block>
    <block type="control_if" id="control_if"></block>
    <block type="control_if_else" id="control_if_else"></block>
    <block type="control_repeat_until" id="control_repeat_until"></block>
  </category>
  <category name="Control" colour="#59C059" secondaryColour="#46B946">
    <block type="control_wait" id="control_wait">
      <value name="DURATION">
        <shadow type="math_positive_number">
          <field name="NUM">1</field>
        </shadow>
      </value>
    </block>
    <block type="operator_lt" id="operator_lt">
      <value name="OPERAND1">
        <shadow type="math_positive_number">
          <field name="NUM"></field>
        </shadow>
      </value>
      <value name="OPERAND2">
        <shadow type="math_positive_number">
          <field name="NUM"></field>
        </shadow>
      </value>
    </block>
    <block type="operator_equals" id="operator_equals">
      <value name="OPERAND1">
        <shadow type="math_positive_number">
          <field name="NUM"></field>
        </shadow>
      </value>
      <value name="OPERAND2">
        <shadow type="math_positive_number">
          <field name="NUM"></field>
        </shadow>
      </value>
    </block>
    <block type="operator_gt" id="operator_gt">
      <value name="OPERAND1">
        <shadow type="math_positive_number">
          <field name="NUM"></field>
        </shadow>
      </value>
      <value name="OPERAND2">
        <shadow type="math_positive_number">
          <field name="NUM"></field>
        </shadow>
      </value>
    </block>
    <block type="operator_and" id="operator_and"></block>
    <block type="operator_or" id="operator_or"></block>
    <block type="operator_not" id="operator_not"></block>
  </category>
  <category name="Math" colour="#CF63CF" secondaryColour="#C94FC9">
    <block type="math_show_number" id="math_show_number">
      <value name="number_values">
        <shadow type="math_number">
          <field name="NUM"></field>
        </shadow>
      </value>
    </block>
    <block type="operator_add" id="operator_add">
      <value name="NUM1">
        <shadow type="math_number">
          <field name="NUM"></field>
        </shadow>
      </value>
      <value name="NUM2">
        <shadow type="math_number">
          <field name="NUM"></field>
        </shadow>
      </value>
    </block>
    <block type="operator_subtract" id="operator_subtract">
      <value name="NUM1">
        <shadow type="math_number">
          <field name="NUM"></field>
        </shadow>
      </value>
      <value name="NUM2">
        <shadow type="math_number">
          <field name="NUM"></field>
        </shadow>
      </value>
    </block>
    <block type="operator_multiply" id="operator_multiply">
      <value name="NUM1">
        <shadow type="math_number">
          <field name="NUM"></field>
        </shadow>
      </value>
      <value name="NUM2">
        <shadow type="math_number">
          <field name="NUM"></field>
        </shadow>
      </value>
    </block>
    <block type="operator_divide" id="operator_divide">
      <value name="NUM1">
        <shadow type="math_number">
          <field name="NUM"></field>
        </shadow>
      </value>
      <value name="NUM2">
        <shadow type="math_number">
          <field name="NUM"></field>
        </shadow>
      </value>
    </block>
  </category>
  <category name="Text" colour="#5CB1D6" secondaryColour="#47A8D1">
    <block type="show_text" id="show_text">
      <value name="text_values">
        <shadow type="text">
          <field name="TEXT"></field>
        </shadow>
      </value>
    </block>
  </category>
  <category name="Data" colour="#FF8C1A" secondaryColour="#DB6E00" custom="VARIABLE">
  </category>
  <!--<category name="PROCEDURE" colour="#FF8C1A" secondaryColour="#DB6E00" custom="PROCEDURE">-->
    <!--<block type="procedures_defnoreturn">-->
    <!--</block>-->
  <!--</category>-->

  <category name="input/output" colour="#FF6680" secondaryColour="#FF4D6A">
    <block type="inout_digital_write" id="inout_digital_write">
      <value name="pin">
        <shadow type="inout_digital_pin">
        </shadow>
      </value>
      <value name="p_value">
        <shadow type="inout_highlow">
        </shadow>
      </value>
    </block>
    <block type="inout_digital_read" id="inout_digital_read">
      <value name="pin">
        <shadow type="inout_digital_pin">
        </shadow>
      </value>
    </block>
    <block type="inout_analog_write" id="inout_analog_write">
      <value name="pin">
        <shadow type="inout_analog_pin">
        </shadow>
      </value>
      <value name="p_value">
        <shadow type="math_number">
      <field name="NUM">1</field>
    </shadow>
      </value>
    </block>
    <block type="inout_analog_read" id="inout_analog_read">
      <value name="pin">
        <shadow type="inout_analog_pin">
        </shadow>
      </value>
    </block>
  </category>
    <category name="servo" colour="#FFBF00" secondaryColour="#E6AC00">
      <block type="servo_move">
        <value name="PIN">
        <shadow type="inout_analog_pin">
        </shadow>
      </value>
    <value name="DEGREE">
        <shadow type="math_number">
      <field name="NUM">1</field>
    </shadow>
      </value>
      </block>
      <block type="servo_read_degrees">
        <value name="PIN">
        <shadow type="inout_analog_pin">
        </shadow>
      </value>
      </block>
    </category>
    <category name="customs" colour="#FFAB19" secondaryColour="#EC9C13">
      <block type="customs_digital_pin" id="customs_digital_pin">
        <value name="number_values">
          <shadow type="inout_digital_pin">
          </shadow>
        </value>
      </block>
      <block type="customs_analog_pin" id="customs_analog_pin">
        <value name="string_values">
          <shadow type="inout_analog_pin">
          </shadow>
        </value>
      </block>
      <block type="customs_show_highlow" id="customs_show_highlow">
        <value name="d_values">
          <shadow type="inout_highlow">
          </shadow>
        </value>
      </block>
      <block type="customs_digital_write" id="customs_digital_write"></block>
      <block type="customs_digital_read" id="customs_digital_read"></block>
      <block type="customs_analog_write" id="customs_analog_write">
        <value name="p_value">
          <shadow type="math_number">
        <field name="NUM">1</field>
      </shadow>
        </value>
      </block>
      <block type="customs_analog_read" id="customs_analog_read"></block>
      <block type="customs_pulse_pin" id="customs_pulse_pin">
        <value name="string_values">
          <shadow type="inout_analog_pin">
          </shadow>
        </value>
      </block>
      <block type="customs_Roller_switch_pin" id="customs_Roller_switch_pin">
        <value name="string_values">
          <shadow type="inout_analog_pin">
          </shadow>
        </value>
      </block>
      <block type="customs_Key_switch_pin" id="customs_Key_switch_pin">
        <value name="string_values">
          <shadow type="inout_analog_pin">
          </shadow>
        </value>
      </block>
      <block type="customs_Photosensitive_triggering_pin" id="customs_Photosensitive_triggering_pin">
        <value name="string_values">
          <shadow type="inout_analog_pin">
          </shadow>
        </value>
      </block>
      <block type="customs_Magnetic_switch_pin" id="customs_Magnetic_switch_pin">
        <value name="string_values">
          <shadow type="inout_analog_pin">
          </shadow>
        </value>
      </block>
      <block type="customs_Touch_switch_pin" id="customs_Touch_switch_pin">
        <value name="string_values">
          <shadow type="inout_analog_pin">
          </shadow>
        </value>
      </block>
      <block type="customs_Threshold_trigger_pin" id="customs_Threshold_trigger_pin">
        <value name="string_values">
          <shadow type="inout_analog_pin">
          </shadow>
        </value>
      </block>
      <block type="customs_potentiometer_pin" id="customs_potentiometer_pin">
        <value name="string_values">
          <shadow type="inout_analog_pin">
          </shadow>
        </value>
      </block>
      <block type="customs_Pressure_sensing_pin" id="customs_Pressure_sensing_pin">
        <value name="string_values">
          <shadow type="inout_analog_pin">
          </shadow>
        </value>
      </block>
      <block type="customs_Photosensitive_sensor_pin" id="customs_Photosensitive_sensor_pin">
        <value name="string_values">
          <shadow type="inout_analog_pin">
          </shadow>
        </value>
      </block>
      <block type="customs_Sound_sensor_pin" id="customs_Sound_sensor_pin">
        <value name="string_values">
          <shadow type="inout_analog_pin">
          </shadow>
        </value>
      </block>
      <block type="customs_Grayscale_detection_module_pin" id="customs_Grayscale_detection_module_pin">
        <value name="string_values">
          <shadow type="inout_analog_pin">
          </shadow>
        </value>
      </block>
      <block type="customs_Remote_sensing_module_pin" id="customs_Remote_sensing_module_pin">
        <value name="string_values">
          <shadow type="inout_analog_pin">
          </shadow>
        </value>
      </block>
      <block type="customs_Ultrasonic_range_finder_pin"id="customs_Ultrasonic_range_finder_pin">
        <value name="string_values">
          <shadow type="inout_analog_pin">
          </shadow>
        </value>
      </block>
      <block type="customs_Sliding_rheostat_pin" id="customs_Sliding_rheostat_pin">
        <value name="string_values">
          <shadow type="inout_analog_pin">
          </shadow>
        </value>
      </block>
      <block type="customs_Infrared_detector_pin" id="customs_Infrared_detector_pin">
        <value name="string_values">
          <shadow type="inout_analog_pin">
          </shadow>
        </value>
      </block>
      <block type="customs_servo_motor_single" id="customs_servo_motor_single">
        <value name="MOTOR_M">
          <shadow type="customs_motor_m"></shadow>
        </value>
        <value name="DIRECTION_SET">
          <shadow type="customs_motor_direction"></shadow>
        </value>
        <value name="SPEED_SET_VAL">
          <shadow type="math_number">
            <field name="NUM">1</field>
          </shadow>
        </value>
      </block>
      <block type="customs_servo_motor_two" id="customs_servo_motor_two">
        <value name="MOTOR_M">
          <shadow type="customs_two_motor_direction"></shadow>
        </value>
        <value name="SPEED_SET">
          <shadow type="customs_two_motor_speed"></shadow>
        </value>
      </block>
      <block type="customs_oled_single" id="customs_oled_single">
        <value name="ROW_X">
          <shadow type="math_number">
            <field name="NUM">0</field>
          </shadow>
        </value>
        <value name="COLUMN_Y">
          <shadow type="math_number">
            <field name="NUM">0</field>
          </shadow>
        </value>
      </block>
      <block type="customs_oled_display" id="customs_oled_display"></block>
      <block type="customs_play_sound" id="customs_play_sound">
        <value name="tone_play">
          <shadow type="inout_digital_pin">
          </shadow>
        </value>
        <value name="frequency">
          <shadow type="customs_tone_rhythm">
          </shadow>
        </value>
      </block>
      <block type="customs_play_sound_duration" id="customs_play_sound_duration">
        <value name="tone_play">
          <shadow type="inout_digital_pin">
          </shadow>
        </value>
        <value name="frequency">
          <shadow type="customs_tone_rhythm">
          </shadow>
        </value>
        <value name="otime">
          <shadow type="math_number">
            <field name="NUM">0</field>
          </shadow>
        </value>
      </block>
      <block type="customs_stop_sound" id="customs_stop_sound">
        <value name="PIN">
          <shadow type="inout_digital_pin">
          </shadow>
        </value>
      </block>
    </category>
  </xml>


    <!-- Sidebar -->
  <script>

      function renderContent(count) {
        if (count==1){
           var arduinoTextarea = document.getElementById('content_arduino');
          arduinoTextarea.value = Blockly.Arduino.workspaceToCode(Blockly.mainWorkspace);
          arduinoTextarea.focus();
        }
        else if(count==2){
          var xmlTextarea = document.getElementById('content_xml');
          var xmlDom = Blockly.Xml.workspaceToDom(Blockly.mainWorkspace);
          var xmlText = Blockly.Xml.domToPrettyText(xmlDom);
          xmlTextarea.value = xmlText;
          xmlTextarea.focus();
        }

      }
      function tab(a){
        var obox=document.getElementById(a);
        var spans=obox.getElementsByTagName('span');
        var divs=obox.getElementsByTagName('a');
        for(var i=0; i<spans.length; i++){
          spans[i].index=i;
          spans[i].onclick=function(){
            for( var i=0; i<spans.length; i++){
              spans[i].style.background='#fff'
              divs[i].style.display='none'
              renderContent(i)
            }
             this.style.background='#ccc'
            divs[this.index].style.display='block'
          }
        }
      }
      tab('box');
  </script>

  </body>
</html>
